<template>
  <div v-if="classData">
    <div class="recommendVue" v-for="(item, index) in classData" :key="index">
      <div id="left">
        <div>{{ item.tip }}</div>
        <li>
          <em>{{ item.title }}</em
          ><span></span><em>{{ item.personal }}</em>
        </li>
        <p>
          <em>共{{ item.items }}讲</em><span>|</span
          ><em>{{ item.assistance }}人已学</em>
        </p>
        <img
          src="../../assets/img-class/Class/组8.png"
          alt=""
          class="preview"
        />
      </div>
      <div id="right">
        <img :src="item.img" alt="" class="picture" />
      </div>
    </div>
  </div>
</template>

<script>
// import { getClassData } from "../../utils/api";
// import { reactive } from "vue";
import { computed, onMounted } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    // 推荐数据
    // const response = reactive({
    //   arr: null,
    // });
    // onMounted(async () => {
    //   const res = await getClassData();
    //   // console.log(res.data.status);
    //   // console.log(res.data.result);
    //   // if (res.data.status === 0) {
    //   //   response.arr = res.data.result;
    //   // }
    //   response.arr = res.data.result;
    //   // console.log(response.arr);
    //   filterItem(response.arr);
    // });
    const store = useStore();

    const classData = computed(() => {
      return store.state.class.res;
    });

    // console.log(classData);
    const fn = () => store.dispatch("getClassAsync");

    onMounted(() => {
      fn();
    });

    return { classData };
  },
};
</script>

<style lang="less" scoped>
.recommendVue {
  margin-left: 15px;
  display: flex;
  height: 120px;
  margin-bottom: 35px;

  #left {
    width: 226px;
    height: 100%;
    text-align: left;
    > div {
      height: 40px;
      overflow: hidden;

      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #363636;
      line-height: 20px;
    }
    & > div p {
      white-space: wrap;
      width: 100%;
      height: 35px;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #363636;
      line-height: 17px;
    }
    & > li {
      width: 100%;
      height: 30px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #242424;
      line-height: 30px;
      display: flex;
      align-items: center;
      span {
        display: block;
        width: 3px;
        height: 3px;
        background-color: #363636;
        border-radius: 50%;
        margin: 0 8px 0 8px;
      }
    }
    & > p {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #999999;
      margin-bottom: 10px;
      span {
        margin: 0 6px 0 6px;
      }
    }
    .preview {
      width: 47px !important;
      height: 19px;
      margin: 0 !important;
      margin-top: 12px;
    }
  }
  #right {
    .picture {
      width: 96px;
      height: 120px;
    }
  }
}
</style>
